/**
 * Created by Ysssssss on 2021/5/2.
 */

import React, { PureComponent } from 'react'
import {DesignTemplateContext} from "@pages/shoppingMall/ShoppingMallDesignDetailPage";
import ShoppingMallPreviewShareIcon from "@components/shoppingMall/ShoppingMallPreviewShareIcon";
import {Col, Radio, Row} from "antd";
import ImageUpload from "@common/presentational/ImageUpload";
import ParamsInput from "@common/presentational/ParamsInput";
import BannerListModule, {BannerListPreview} from "@components/shoppingMall/design/BannerListModule";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import {withRouter} from "react-router-dom";

@withRouter
class SpecialDesign extends PureComponent {
    static contextType = DesignTemplateContext;

    constructor(props, context) {
        super(props, context);
        this.state = {
            selectedIndex: -1
        }

        const { subNav } = context
        const { platformId } = getHistoryMatchParams(props)
        if (!subNav.includes('special')) {
            props.history.replace(`/shopping-mall/design/${platformId}/detail`)
        }
    }

    onValueChange (key, value) {
        const { onChange, templateInfo } = this.context
        onChange && onChange('special', {
            ...templateInfo.special,
            [key]: value,
        })
    }

    onPreviewSelected (index) {
        this.setState({
            selectedIndex: index
        })
    }

    handleBannerListChange(index, value) {
        const { onChange, templateInfo } = this.context
        const { special } = templateInfo
        const { content } = special
        onChange && onChange('special', {
            ...special,
            content: [
                ...content.slice(0, index),
                value,
                ...content.slice(index + 1),
            ]
        })

    }

    render () {
        const { selectedIndex } = this.state
        const { templateInfo } = this.context
        const { special } = templateInfo

        return (
            <>
                <div className="preview-container">
                    <div className="preview-reality special-preview">
                        <ShoppingMallPreviewShareIcon />
                        <div className="preview-title">专场页</div>
                        <img src={require("@assets/image/design-search.png")} alt="" className="w-100"/>
                        <div className={`special-preview-store cur-poi${selectedIndex === -1 ? ' bd-green' : ''}`}
                             onClick={this.onPreviewSelected.bind(this, -1)}
                        >
                            {special.picture ? (
                                <img className="special-img" src={special.picture} alt=""/>
                            ) : (
                                <div className="special-img"/>
                            )}
                            <div className="mgl-8">
                                <div className="ft-16">{special.name}</div>
                                <div className="ft-12 ft-clr-ml">{special.desc}</div>
                            </div>
                        </div>
                        <img src={require("@assets/image/design-coupon.png")} alt="" className="w-100"/>
                        <BannerListPreview
                            className={selectedIndex === 1 ? ' bd-green' : ''}
                            onClick={this.onPreviewSelected.bind(this, 1)}
                            bannerInfo={special.content[1]}
                        />
                        <img src={require("@assets/image/design-group-product.png")} alt="" className="w-100"/>
                    </div>
                </div>
                { selectedIndex === 1 ? (
                    <BannerListModule
                        bannerInfo={special.content[1]}
                        index={1}
                        onChange={this.handleBannerListChange.bind(this)}
                    />
                ) : (
                    <div className="operation-container ft-clr-d">
                        <div className="ft-16">品牌专场</div>
                        <div className="ft-12 ft-clr-ml pdb-16 bdb-l">此为品牌自营店铺专场页面</div>
                        <Row className="mgt-24">
                            <Col span={6}>店铺图片：</Col>
                            <Col span={18}>
                                <ImageUpload
                                    value={special.picture}
                                    onChange={this.onValueChange.bind(this, 'picture')}
                                    accept='image/png, image/jpeg, image/jpg'
                                    maxFileSize="1m"
                                    uploadIntro={(
                                        <div className="ft-12 ft-clr-ml mgl-16" style={{width: '160px'}}>
                                            支持PNG、JPG格式，不超过1M，建议尺寸750*1624PX
                                        </div>
                                    )}
                                />
                            </Col>
                        </Row>
                        <Row className="mgt-16">
                            <Col span={6}>店铺名称：</Col>
                            <Col span={18}>
                                <ParamsInput className="w-100" value={special.name} onChange={this.onValueChange.bind(this, 'name')}/>
                            </Col>
                        </Row>
                        <Row className="mgt-24">
                            <Col span={6}>店铺信息：</Col>
                            <Col span={18}>
                                <ParamsInput className="w-100" value={special.desc} onChange={this.onValueChange.bind(this, 'desc')}/>
                            </Col>
                        </Row>
                    </div>
                ) }
            </>
        )
    }
}

export default SpecialDesign